<template>
	<div class="padding-across-10">
		<div style="width: 100%; height: 70%">
			<div class="example">
				<div class="red-point"></div>
				<span>&nbsp;&nbsp;层架位置(点击选择层架位置)</span>
				<el-button style="margin-left: 15px" size="small" type="primary" @click="setPoint"><i class="el-icon-eleg-icon_drive el-icon--left"></i>保 存</el-button>
			</div>
			<div id="main">
				<div class="my-button-group">
					<a :class="'button-item ' + (buttonActive === 1? 'active' : '')" @click="showFloor(1)" style="border-radius: 0.5rem 0.5rem 0 0;">F1</a>
					<a :class="'button-item ' + (buttonActive === 2? 'active' : '')" @click="showFloor(2)">F2</a>
					<a :class="'button-item ' + (buttonActive === 3? 'active' : '')" @click="showFloor(3)" style="border-radius: 0rem 0rem 0.5rem 0.5rem;">F3</a>
				</div>
				<div class="center">
					<canvas id="indoormap" width="288" height="480" @click="getCanvasPos($event)">[Your browser is too old!]</canvas>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import ALLMAPINFO from '../../../../assets/js/mapinfo.js'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'

	export default {
		data() {
			return {
				zoomScale: 0.5,
				op: 1,
//				origin: {
//					x: 100,
//					y: 600,
//					floor: 1
//				},
				destination: {
					x: null,
					y: null,
					floor: 1
				},
				currentFloor: 2,
				buttonActive: 0,
				setP: {}
			}
		},
		computed: {
			clientWidth: function() {
				return document.documentElement.clientWidth;
			},
			clientHeight: function() {
				return document.documentElement.clientHeight;
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			getCanvasPos(e) { //获取鼠标在canvas上的坐标  
				window.clearInterval(this.Loop);
				var canvas = document.getElementById('indoormap');
				var ctx = canvas.getContext('2d');
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				var rect = canvas.getBoundingClientRect();
				this.setP.x = parseInt(e.clientX - rect.left * (canvas.width / rect.width));
				this.setP.y = parseInt(e.clientY - rect.top * (canvas.height / rect.height));
				// console.log('鼠标点击坐标点', '(' +this.setP.x+ ','+this.setP.y+')');
//				this.DrawMapInfo(0.35, 0.35, 1, 1, this.currentFloor);
				this.DrawOrigin(this.setP.x, this.setP.y, 5, '', 'red');
			},
			setPoint() {
				if(this.setP.x == undefined || this.setP.y == undefined) {
					this.$message.error('请选择层架标位置');
				} else {
					var params = {
						bookracktag: this.templateObj.tag,
						info: [{
							desc: "",
							xpoint: this.setP.x,
							ypoint: this.setP.y,
							flow: this.currentFloor
						}]
					}
					HttpServer.httpPost.call(this, '/Api/Device/SetBookrackPosition', params, function() {}, function(response) {
						if(response.data.code === 0) {
							this.$message({
								type: 'success',
								message: '层架标位置设置成功'
							})
						} else {
							this.$message.error(response.data.msg);
						}
					});
				}
			},
			
			showFloor(currentFloor) {
				// console.log(currentFloor)
				this.buttonActive = currentFloor;
				this.currentFloor = currentFloor;
				//this.DrawAnimate(this.origin.x, this.origin.y, this.origin.floor, this.destination.x, this.destination.y, this.destination.floor, currentFloor);
				if(this.currentFloor === 1){
					$('#indoormap').css('background-image', 'url(./static_home/floor1.png)');
				}else if(this.currentFloor === 2){
					$('#indoormap').css('background-image', 'url(./static_home/floor2.png)');
				}else if(this.currentFloor === 3){
					$('#indoormap').css('background-image', 'url(./static_home/floor3.png)');
				}
				clearInterval(this.Loop);
				this.Loop = setInterval(() => {
					this.DrawAnimate(this.destination.x, this.destination.y, this.destination.floor, this.currentFloor);
				}, 500)
			},
			DrawMapInfo(scaleX, scaleY, offsetX, offsetY, floor) {
				var MAPINFO = ALLMAPINFO[floor - 1];
				for(var i = 0; i < MAPINFO.length; i++) {
					this.DrawBlock(MAPINFO[i].x * scaleX + offsetX, MAPINFO[i].y * scaleY + offsetY, MAPINFO[i].width * scaleX, MAPINFO[i].height * scaleY, MAPINFO[i].title, MAPINFO[i].color, MAPINFO[i].textcolor, MAPINFO[i].bordercolor, MAPINFO[i].imageurl);
				}
			},
			DrawBlock(x, y, width, height, text, backgroudcolor, textcolor, bordercolor, imageurl) {
				var canvas = document.getElementById("indoormap");
				var context2D = canvas.getContext("2d");
				var textsize = width * height / (100 * this.zoomScale * this.zoomScale);
				context2D.fillStyle = backgroudcolor;
				context2D.fillRect(x, y, width, height);
				context2D.strokeStyle = bordercolor;
				context2D.lineWidth = 0.8;
				context2D.strokeRect(x, y, width, height);
				context2D.fillStyle = textcolor;
				if(textsize > 15) {
					context2D.font = 20 * this.zoomScale + "pt Microsoft YaHei";
					if(imageurl != "") {
						var image = new Image();
						image.src = imageurl;
						context2D.drawImage(image, x + width / 7, y + height / 2 - 25 * this.zoomScale, 30 * this.zoomScale, 30 * this.zoomScale);
					}
				} else {
					context2D.font = 0 + "pt Microsoft YaHei";
				}
				context2D.fillText(text, x + width / 7 + 40 * this.zoomScale, y + height / 2);
			},
			DrawOrigin(x, y, radius, text, backgroudcolor, textcolor, imageurl) {
				var canvas = document.getElementById('indoormap');
				if(canvas.getContext) {
					var canvas = document.getElementById("indoormap");
					var context2D = canvas.getContext("2d");
					var textsize = radius / (10 * this.zoomScale * this.zoomScale);
					context2D.beginPath();
					context2D.fillStyle = backgroudcolor;
					context2D.arc(x, y, radius, 0, Math.PI * 2, true);
					context2D.fill();
					context2D.fillStyle = textcolor;
					context2D.fillText(text, x - radius, y - radius);
				}
			},
			//floor1终点所在层, currentFloor目前所在层
			DrawAnimate(x1, y1, floor1, currentFloor) {
				var canvas = document.getElementById('indoormap');
				var ctx = canvas.getContext('2d');
				ctx.clearRect(0, 0, canvas.width, canvas.height);
//				this.DrawMapInfo(0.35, 0.35, 1, 1, currentFloor);
//				if(floor === currentFloor) {
//					this.DrawOrigin(x, y, 5, '起点', 'red');
//				}
				if(this.destination.floor === this.currentFloor) {
					this.op === 1 ? this.op = 0 : this.op = 1;
					var color = 'rgba(255, 0, 0,' + this.op + ')';
					this.DrawOrigin(x1, y1, 5, '', color);
				}
			},
			Loop() {

			},
		},
		created() {
			if(this.templateObj.positions != null && this.templateObj.positions.length > 0) {
				this.destination.x = this.templateObj.positions[0].xpoint;
				this.destination.y = this.templateObj.positions[0].ypoint;
				this.destination.floor = this.templateObj.positions[0].flow;
			}	
			this.$nextTick(function(){
				this.showFloor(this.destination.floor);
			})
		},
		computed: {

		},
		mounted() {
			var clientWidth = document.documentElement.clientWidth;
			var clientHeight = document.documentElement.clientHeight;
			this.zoomScale = 1;
			if(clientWidth <= clientHeight) {
				this.zoomScale = clientWidth / clientWidth;
			} else {
				this.zoomScale = clientHeight / clientWidth;
			}
			//this.DrawMapInfo(0.5, 0.5, 1, 1);
//			this.Loop = setInterval(() => {
//				this.DrawAnimate(this.origin.x, this.origin.y, this.origin.floor, this.destination.x, this.destination.y, this.destination.floor, this.currentFloor);
//			}, 500)
		},
		beforeDestroy() {
			clearInterval(this.Loop);
		}
	}
</script>

<style lang="less" scoped>
	.example {
		// position: absolute;
		// bottom: 8%;
		// left: 15%;
		display: flex;
		align-items: center;
	}
	
	.red-point {
		width: 20px;
		height: 20px;
		background-color: red;
		border-radius: 50%;
		display: inline-block;
		margin-left: 70%;
	}
	
	#main {
		position: relative;
		width: 50%;
		height: 100%;
		margin: 250px auto;
		.center {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#indoormap {
			border: 1px solid rgba(76, 181, 216, 1);
			background-image: url(../../../../../static/floor1.png);
			background-size: contain;
			background-repeat: no-repeat;
		}
		.compass {
			position: absolute;
			top: 5%;
			left: 5%;
		}
		.my-button-group {
			position: absolute;
			top: 8%;
			left: 10%;
			display: flex;
			flex-direction: column;
			left: 30px;
		}
		.button-item {
			cursor: pointer;
			padding: 0.5rem 1.5rem;
			background-color: #229ffd;
			border-bottom: 1px solid white;
			color: white;
		}
		.button-item:hover {
			background-color: #215b9e;
		}
		.active {
			background-color: #215b9e;
		}
	}
</style>